@extends('wechat.base')
@section('title')
用户注册
@endsection
@section('content')
<form onsubmit="return false;" id="reg_form" style="margin-top: 20%">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="name" type="text" placeholder="请输入姓名"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">身份证</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="id_card" onkeyup="value = value.replace(/[^\w\.\/]/ig, '')" type="text" placeholder="请输入身份证号码"/>
            </div>
        </div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd">
                <label class="weui-label">手机号</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="telphone" name="telphone" type="tel" placeholder="请输入手机号"/>
            </div>
            <div class="weui-cell__ft">
                <button id="sms_code" class="weui-vcode-btn">获取验证码</button>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="code" type="number" placeholder="请输入验证码"/>
            </div>
        </div>
    </div>
    <div style="margin: 20px"><a id="register" href="javascript:;" class="weui-btn weui-btn_primary">注册</a></div>
    <label style="text-align: center" for="weuiAgree" class="weui-agree">
        <span class="weui-agree__text">
            点击登录,即表示已阅读并同意<a href="/agreement">《用户注册协议》</a>
        </span>
    </label>
</form>
@endsection
@section('otherjs')
<script>
    var i = 3;//验证码倒计时初始值为60
    var interval;
    $('#sms_code').click(function () {
        $.post('/send_code', {telphone: $('#telphone').val()}, function (res) {
            if (res.status == 0) {
                layer.open({
                    content: res.msg
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
            } else {
                layer.open({
                    content: res.msg
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                    , success: function (elem) {
                        $('#sms_code').text(i + 's后重新获取');
                        $('#sms_code').attr('disabled', 'disabled');
                        interval = setInterval('countDown()', 1000);
                    }
                });
            }
        });
    })

    $('#register').click(function () {
        $.post('/register', $('#reg_form').serialize(), function (res) {
            if (res.status == 0) {
                layer.open({
                    content: res.msg
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                    , success: function (elem) {
                        //console.log(elem);
                    }
                });
            } else {
                layer.open({
                    content: res.msg
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                    , success: function (elem) {
                        //console.log(elem);
                        location.href = '/reg_success';
                    }
                });
            }

        })
    });

    //验证码倒计时函数
    function countDown() {
        i--;
        $('#sms_code').text(i + 's后重新获取');
        if (i <= 0) {
            $('#sms_code').text('获取验证码');
            $('#sms_code').removeAttr('disabled');
            window.clearInterval(interval);
            i = 3;
        }
    }
</script>
@endsection